<script setup>
import { ref } from 'vue'
const defaultInput = ref('')
const textareaInput = ref('')
const pwInput = ref('')
const numInput = ref('')
const abcNumInput = ref('')
const xssInput = ref('')
const maxInput = ref('')
</script>

<template>
  <div class="wrap">
    <h1>点击输入框放大</h1>
    <div class="wrap-item">
      <h4>默认输入</h4>
      <input type="text" v-model="defaultInput" v-sharpEnter />
    </div>

    <div class="wrap-item">
      <h4>textarea类型输入</h4>
      <textarea
        v-model="textareaInput"
        v-sharpEnter
        cols="30"
        rows="10"
        maxlength="50"
      ></textarea>
    </div>

    <div class="wrap-item">
      <h4>密码输入</h4>
      <input
        type="password"
        v-model="pwInput"
        v-sharpEnter="{
          isPassWord: true,
        }"
      />
    </div>

    <div class="wrap-item">
      <h4>纯数字输入</h4>
      <input
        type="text"
        v-model="numInput"
        v-sharpEnter="{
          isNum: true,
        }"
      />
    </div>

    <div class="wrap-item">
      <h4>英文、数字输入</h4>
      <input
        type="text"
        v-model="abcNumInput"
        v-sharpEnter="{
          isToUpper: true,
        }"
      />
    </div>

    <div class="wrap-item">
      <h4>XSS校验输入</h4>
      <input
        type="text"
        v-model="xssInput"
        v-sharpEnter="{
          isSafe: true,
        }"
      />
    </div>

    <div class="wrap-item">
      <h4>输入长度限制(10位)</h4>
      <input
        type="text"
        v-model="maxInput"
        maxlength="10"
        v-sharpEnter="{
          max: 10,
        }"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
//页面样式
.wrap {
  width: 50vw;
  margin: 0 auto;
  border: 2px solid #f40;
  height: 100vh;
  overflow: auto;
  text-align: center;
  h1 {
    color: #f40;
  }
  h1,
  h4 {
    margin: 8px 0;
  }
  &-item {
    padding: 20px;

    input {
      width: 200px;
      height: 30px;
      font-size: 14px;
    }
  }
}
</style>

<style lang="less">
// 全局样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: '微软雅黑';
}
body,
html,
#app {
  width: 100%;
  height: 100%;
}
</style>
